<template>
  <view class="list">
    <view class="item" v-for="(item, i) of items" :key="item.id">
      <view class="item-hd">
        <checkbox
          shape="circle"
          class="checkbox"
          :checked="item.checked"
          color="#F60313"
          @click="$emit('check', i)"
        />

        <view class="order-no">订单编号：{{ item.order_no }}</view>
      </view>

      <view class="item-bd">
        <view class="des">
          <view class="label">发票金额</view>
          <view class="con">¥{{ item.price }}</view>
        </view>
        <view class="des">
          <view class="label">公司名称</view>
          <view class="con">{{ getConfig(item.invoice_conf).title }}</view>
        </view>
        <view class="des">
          <view class="label">纳税人识别号</view>
          <view class="con">{{ getConfig(item.invoice_conf).code }}</view>
        </view>

        <template v-if="item.showMore">
          <view class="des">
            <view class="label">注册地址</view>
            <view class="con">{{
              getConfig(item.invoice_conf).ext.address
            }}</view>
          </view>
          <view class="des">
            <view class="label">注册电话</view>
            <view class="con">{{
              getConfig(item.invoice_conf).ext.mobile
            }}</view>
          </view>
          <view class="des">
            <view class="label">开户银行</view>
            <view class="con">{{ getConfig(item.invoice_conf).ext.bank }}</view>
          </view>
          <view class="des">
            <view class="label">银行账户</view>
            <view class="con">{{
              getConfig(item.invoice_conf).ext.bank_card
            }}</view>
          </view>
        </template>

        <view
          v-if="getConfig(item.invoice_conf).type == 2"
          :class="['hasMore']"
          @click="$emit('showMore', i)"
        >
          <view v-if="!item.showMore"
            >查看详情<text class="icon-arrow-down iconfont"></text
          ></view>
          <view v-else
            >收起详情<text class="icon-arrow-up iconfont"></text
          ></view>
        </view>
      </view>

      <view class="item-btn">
        <view
          class="btn"
          @click="
            $utils.toUrl(`/order/order-detail/order-detail?id=${item.order_id}`)
          "
          >查看订单</view
        >
        <view class="btn" @click="handle('edit', item)">更改发票类型</view>
        <view class="btn on" @click="handle('apply', item)">申请开票</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      }
    }
  },

  computed: {
    getConfig() {
      return (item) => {
        return JSON.parse(item);
      };
    }
  },

  methods: {
    handle(type, item) {
      switch (type) {
        case "edit":
          if (item) {
            this.$utils.toUrl(
              `/invoice/apply/index?order_id=${item.order_id}&params=${item.invoice_conf}&price=${item.price}&order_no=${item.order_no}`
            );
          }
          break;

        case "apply":
          this.$emit("apply", {
            id: item.id
          });
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  padding: 24rpx;
}

.item {
  background: #fff;
  border-radius: 20rpx;
  padding: 0 24rpx;
  margin-bottom: 24rpx;
}

.item-hd {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 2rpx solid #f8f8f8;

  .checkbox {
    position: relative;
    top: 4rpx;
  }
}

.order-no {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 30rpx;
  color: #262626;
  font-weight: bold;
}

.item-bd {
  padding: 10rpx 0;
  .des {
    display: flex;
    padding: 10rpx 0;
    font-size: 24rpx;
  }

  .label {
    width: 220rpx;
    color: #8c8c8c;
  }

  .con {
    flex: 1;
    overflow: hidden;
  }
}

.hasMore {
  padding: 14rpx 0 20rpx;
  text-align: center;
  font-size: 24rpx;
  color: #8c8c8c;
}

.item-btn {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;

  .btn {
    margin: 0 0 24rpx 24rpx;
    padding: 12rpx 24rpx;
    border: 1px solid #a1a1a1;
    border-radius: 32px;

    &.on {
      border-color: #f0250e;
      color: #f0250e;
    }
  }
}
</style>
